<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>绑定样式</title>

    <style>
        .iwat{
            border:3px solid black;
        }
        .classA{
            background-color: skyblue;
        }
        .classB{
            color: red;
        }
        .classC{
            text-shadow: 2px 2px 3px yellow;
        }
    </style>
</head>
<body>
    <!-- 
        1.绑定class样式
            :class='xxx' xxx可以是字符串\对象\数组
        2.
     -->
    <div id="root">
        <!-- 对象名都是字符串 -->
        <h2 class="iwat" :class='myStyle'>{{title}}</h2>
        <!-- class的对象写法 -->
        <h2 class="iwat" :class='{classB:hasB,classC:hasC}'>{{title}}</h2>
        <!-- class的数组写法 -->
        <h2 class="iwat" :class='[a,b,c]'>{{title}}</h2>
        
        <!-- 绑定style -->
        <h2 class="iwat" :class='[a,b,c]' :style='frontSize:size+"px"'>{{title}}</h2>
        过年好!
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                title:'同门学大家好',
                myStyle:'classA',
                hasB:true,
                hasC:true,
                a:'classA',
                b:'classB',
                c:'classC',
                size:100
            }
        });
    </script>
</body>
</html>